<?php include(VIEW_DIR . 'header.php'); ?>
<?php include(VIEW_DIR . 'side.php'); ?>
<div class="layui-body">
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-header">
				数据表<span style="color: #BBA;font-size: 14px">（ <span id="tables-count">0</span> 个表）</span>
				<a id="create-table" href="javascript:void(0);" class="right"><i class="layui-icon layui-icon-add-1" style="font-size: 16px; color: #1E9FFF;"></i> 新增一个表</a>
			</div>
			<div class="layui-card-body">
				<div id="table-list" class="layui-row layui-col-space10"></div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="tableListTpl">
	{{# layui.each(d.data, function(index, item){ }}
	<div class="layui-col-md4">
		<i class="layui-icon layui-icon-table" style="font-size: 16px; color: #CCC;"></i> <a class="table-item" href="javascript:void(0)" data-name="{{item.name}}">{{item.name}}</a>
		<div class="layui-btn-group">
		  <button class="layui-btn layui-btn-normal layui-btn-xs">
			<i class="layui-icon">&#xe654;</i>
		  </button>
		  <button class="layui-btn layui-btn-normal layui-btn-xs">
			<i class="layui-icon">&#xe642;</i>
		  </button>
		  <button class="layui-btn layui-btn-normal layui-btn-xs">
			<i class="layui-icon">&#xe640;</i>
		  </button>
		</div>
	</div>
	{{# }); }}
	{{#  if(d.data.length === 0){ }}
		没有数据表
	{{#  } }} 
</script>

<script type="text/html" id="addTableTpl">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">数据表名</label>
					<div class="layui-input-block">
						<input type="text" name="t_name" lay-verify="required|verifyTableName" placeholder="输入表名" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">默认ID索引</label>
					<div class="layui-input-block">
						<input type="checkbox" name="t_idx" lay-skin="switch" value="1" checked disabled />
					</div>
				</div>
			</form>
		</div>
	</div>
</script>

<script type="text/html" id="editTableTpl">
	<div class="layui-card">
		<div class="layui-card-header">
			表名: <span id="table-name"></span><span style="color: #BBA;font-size: 14px">（ <span id="fields-count">0</span> 个字段）</span>
			<a id="add-field" href="javascript:void(0);" class="right"><i class="layui-icon layui-icon-add-1" style="font-size: 16px; color: #1E9FFF;"></i> 新增一个字段</a>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="fields" lay-filter="fields"></table>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="addFieldTpl">
	<div class="layui-card">
		<div class="layui-card-header">
			表名: <span id="field-table-name"></span>
		</div>
		<div class="layui-card-body">
			<form class="layui-form layui-form-pane" lay-filter="addFieldForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">字段名</label>
					<div class="layui-input-block">
						<input type="input" name="field_name" lay-filter="field_name" placeholder="请输入字段名称" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">字段类型</label>
					<div class="layui-input-block">
						<select name="field_type" lay-verify="field_type">
							<option value="">请选择一个类型</option>
							<option value="int">int</option>
							<option value="tinyint">tinyint</option>
							<option value="bigint">bigint</option>
							<option value="integer">integer</option>
							<option value="character(20)">char</option>
							<option value="varchar(255)">varchar</option>
							<option value="text">text</option>
							<option value="blob">blob</option>
							<option value="datetime">datetime</option>
							<option value="float">float</option>
							<option value="double">double</option>
							<option value="decimal(10,2)">decimal</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item" pane>
					<label class="layui-form-label">是否必填</label>
					<div class="layui-input-block">
						<input type="checkbox" name="field_required" lay-skin="switch" value="1">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">默认值</label>
					<div class="layui-input-block">
						<input type="input" name="field_default" lay-verity="field_default" placeholder="请输入默认值" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item" pane>
					<label class="layui-form-label">作为主键</label>
					<div class="layui-input-block">
						<input type="checkbox" name="field_primary" lay-skin="switch" value="1">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea name="field_remark" placeholder="请输入备注" class="layui-textarea"></textarea>
					</div>
				</div>
				<button id="field_submit" style="display:none" lay-submit lay-filter="field_post">提交</button> 
			</form>
		</div>
	</div>
</script>

<script>
	layui.use(['laytpl', 'layer', 'form', 'table'], function(){
		var laytpl = layui.laytpl;
		var layer = layui.layer;
		var form = layui.form;
		var table = layui.table;
		var tableListTpl = $('#tableListTpl').html();
		windos.ajaxPost('/structure/ajax_table_info', {}, function(res) {
			if (res.code == 0) {
				$('#tables-count').html(res.count);
				laytpl(tableListTpl).render(res, function(content) {
					$('#table-list').html(content).find('a.table-item').each(function(i, e) {
						var othis = $(this);
						othis.bind('click', function(e) {
							var tableName = othis.attr('data-name');
							var tableDetailTpl = $('#editTableTpl').html();
							var layerDetail = layer.open({
								type: 1,
								title: '编辑数据表',
								area: ['800px', '600px'],
								content: tableDetailTpl,
								success: function(layero, index) {
									var tableDetail = table.render({
										elem: '#fields',
										url: '/structure/ajax_table_detail?t_name=' + tableName,
										cols: [[
											{field: 'cid', width: 40, title: 'ID', sort: true},
											{field: 'name', width: 200, title: '字段名', sort: true, edit: 'text'},
											{field: 'type', width: 160, title: '类型', sort: false, edit: 'text'},
											{field: 'notnull', width: 80, title: '必填', sort: false, edit: 'text'},
											{field: 'dflt_value', width: 80, title: '默认值', sort: false, edit: 'text'},
											{field: 'pk', width: 80, title: '主键', sort: false, edit: 'text'},
											{fixed: 'right', width:100, title:'操作', toolbar: '#buttonBar'}
										]],
										done: function(res, curr, count) {
											laytpl(tableDetailTpl).render(res, function(content) {
												
											});
											
											$('#table-name').html(res.table);
											$('#add-field').attr('data-table', res.table);
											$('#fields-count').html(res.count);
										}
									});
									$('#add-field').bind('click', function() {
										var layerAddField = layer.open({
											type: 1,
											title: '增加字段',
											content: $('#addFieldTpl').html(),
											btn: ['提交', '关闭'],
											btnAlign: 'c',
											btn1: function(index, layero) {
												$('#field_submit').click();
												layer.close(layerAddField);
												tableDetail.reload();
											},
											btn2: function(index, layero) {
												layer.close(layerAddField);
											},
											success: function(layero, index) {
												$('#field-table-name').html($('#add-field').attr('data-table'));
												form.on('submit(field_post)', function(data) {
													windos.ajaxPost('/structure/ajax_add_field', data.field, function(res) {
														console.log(res);
													});
													console.log(data.field);
													return false;
												});
											}
										});
										form.render();
										
									});
									
								}
							});
								
						});
							
					});
				});
			}
		});
		
		// 新增数据表
		$('#create-table').bind('click', function() {
			layer.open({
				type: 1,
				title: '新增数据表',
				area: '480px',
				content: $('#addTableTpl').html(),
				btn: ['提交', '关闭'],
				btnAlign: 'c',
				btn1: function(index, layero) {
					
				},
				btn2: function(index, layero) {
					
				}
			});
			
			form.render();
			
			form.verify({
				verifyTableName: function(value, item) {
					if( ! new RegExp("^[a-zA-Z0-9_]+$").test(value)) {
						return '表名不合法';
					}
				}
			});
			
		});
		
		
		
		
		
	});
	
</script>
<?php include(VIEW_DIR . 'footer.php'); ?>